// pages/feedback/feedback.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        tabs: [{
                id: 0,
                value: "体验问题",
                isActive: true
            },
            {
                id: 1,
                value: "商品、商家投诉",
                isActive: false
            }
        ],
        // 被选中的图片路径数组
        choosenImgs: [],
        textVal: ""
    },
    UploadImgs: [],
    //监听子组件触发的回调函数
    handleTabsItemChange(e) {
        // 获取被点击的标题索引
        const {
            index
        } = e.detail
        // 修改原数组 isActive 变为 true
        let {
            tabs
        } = this.data
        tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false)
        // 赋值
        this.setData({
            tabs
        });
    },
    // 点击加号添加图片
    handleChooseImg() {
        // 调用小程序内置的选择图片api
        wx.chooseImage({
            // 同时选择图片的数量
            count: 9,
            // 图片格式：原图和压缩图片
            sizeType: ['original', 'compressed'],
            // 图片来源：相册或相机
            sourceType: ['album', 'camera'],
            success: (res) => {
                // tempFilePath可以作为img标签的src属性显示图片
                let choosenImgs = res.tempFilePaths;
                // 图片数组 进行拼接
                choosenImgs = [...this.data.choosenImgs, ...choosenImgs];
                this.setData({
                    choosenImgs
                });
            }
        });
    },
    // 叉叉删除图片
    handleRemoveImg(e) {
        // 获取被点击的组件的索引
        const {
            index
        } = e.currentTarget.dataset;
        // 获取图片数组
        let {
            choosenImgs
        } = this.data;
        // 删除元素
        choosenImgs.splice(index, 1);
        this.setData({
            choosenImgs
        });
    },
    // 点击图片预览
    handleImagePreview(e) {
        const {
            index
        } = e.currentTarget.dataset;
        //先构造要预览的图片数组
        const urls = this.data.choosenImgs;
        wx.previewImage({
            urls,
            current: urls[index]
        });
    },
    // 文本域的输入事件
    handleTextInput(e) {
        this.setData({
            textVal: e.detail.value
        });
    },
    // 提交按钮点击事件
    handleFormSubmit() {
        // 获取文本域内容 图片数组
        const {
            textVal,
            choosenImgs
        } = this.data;
        // 反馈的对象
        let advice = {};
        // 合法性验证
        if (!textVal.trim()) {
            wx.showToast({
                title: '输入不合法',
                icon: 'error',
                mask: true
            });
            return;
        }
        wx.showLoading({
            title: '上传中...',
            mask: true
        });
        // 判断有没有需要上传的图片
        if (choosenImgs.length != 0) {
            // 准备上传图片到专门的图片服务器
            // 上传文件api不支持多个文件同时上传 遍历数组 一个一个上传
            choosenImgs.forEach((v, i) => {
                wx.uploadFile({
                    // 图片上传路径
                    filePath: v,
                    // 上传文件名称 自定义 后台获取文件需用 
                    name: 'image',
                    // 图片上传到哪里
                    url: 'https://image.kieng.cn/upload.html?type=jd',
                    // 顺带的文本信息
                    formData: {},
                    success: (res) => {
                        const img = JSON.parse(res.data);
                        let url = img.data.url;
                        this.UploadImgs.push(url);

                        // 所有图片都上传完毕才触发
                        if (i === choosenImgs.length - 1) {
                            wx.hideLoading();
                            // 生成对象 把文本的内容和外网的图片数组 提交到后台中
                            advice.desc = textVal;
                            advice.imgs = this.UploadImgs;
                        }
                    }
                });
            });
        } else {
            wx.hideLoading();
            // 没有需要上传的图片
            // 生成对象 把文本的内容和外网的图片数组 提交到后台中
            advice.desc = textVal;
            advice.imgs = [];
        }
        // 无后台 输出模拟
        console.log(advice);
        // 重置页面
        this.setData({
            textVal: "",
            choosenImgs: []
        });
        // 返回上一页面
        wx.showToast({
            title: '上传成功',
            mask: true,
            icon: 'success'
        });
        setTimeout(() => {
            wx.navigateBack({
                delta: 1,
            });
        }, 1000);
    }
})